<template>
  <div class="cell-list">
<!--    <Search @confirm="confirmSearch" :value="keyword" @input="handleInput"></Search>-->

<!--    <div class="city-list">-->
<!--      <div class="city" v-for="(item, index) in fireWordList" :key="index" @click="searchWord(item)">-->
<!--        {{ item.name }}-->
<!--      </div>-->
<!--    </div>-->

    <div class="example-list">

      <view class="example" v-for="(item, index) in exampleData.area" :key="index">
        <view class="wrap">
          <view class="title">{{ item.buildingname || '-' }}</view>
          <view class="price">详细地址：{{ item.area }}</view>
          <view class="bottom">
            <view class="category">{{ item.homestyle }}</view>
            <view class="toggle" @click="viewDetail(item)">查看详情</view>
          </view>
        </view>
        <img v-if="item.images" :src="'https://fh4.qinyuan.cn' + item.images" class="image">
        <img v-else src="../../static/temp.jpg" class="image">
      </view>

    </div>

    <view class="hover-btn" @click="goPage('/pages/map/map')">
      <img src="../../static/map-icon.png" class="icon">
      <view class="text">地图</view>
    </view>
  </div>
</template>

<script>
import Search from '../../components/Search/Search.vue'
import requestV1 from "../../common/requestV1";
export default {
  components: {
    Search
  },
  data() {
    return {
      buildingname: '',
      id: '',
      latitude: '',
      longitude: '',
      ratio: 12,
      exampleData: {
        area: []
      },
      keyword: '',
      markerList: [],
      fireWordList: []
    }
  },
  onLoad(e) {
    this.buildingname = e.buildingname
    this.id = e.id
    this.latitude = e.latitude
    this.longitude = e.longitude
    this.ratio = e.ratio
    this.getExampleList()
    this.fireWords()
  },
  methods: {
    handleInput(e) {
      this.keyword = e
    },
    searchWord(data) {
      this.confirmSearch(data.name)
    },
    async confirmSearch(value) {
      this.keyword = value
      if (this.keyword) {
        const data = await requestV1({
          url: '/casemarks/search',
          method: 'post',
          data: {
            keyword: this.keyword
          }
        })
        // this.exampleData.area = data.data
      } else {
        this.getExampleList()
      }
    },
    viewDetail(data) {
      const queryStr = `?id=${data.id}`
      this.goPage('/pages/exampleDetail/exampleDetail' + queryStr)
    },
    async fireWords() {
      const data = await requestV1({
        url: '/casemarks/search_word',
        method: 'get'
      })
      this.fireWordList = data.data
    },
    // async getMarkerList() {
    //   const data = await requestV1({
    //     url: '/casemarks/index',
    //     method: 'post',
    //     data: {
    //       lat_lng: `${this.latitude},${this.longitude}`,
    //       ratio: this.ratio
    //     }
    //   })
    //   this.markerList = data.data
    //   console.log(this.markerList, '===this.markerList===')
    // },
    async getExampleList() {
      const data = await requestV1({
        url: '/casemarks/example2',
        method: 'post',
        data: {
          buildingname: this.buildingname,
          id: this.id,
          latitude: this.latitude
        }
      })
      this.exampleData = data.data
      console.log(this.exampleData, '===this.exampleData===')
    },
    // findExampleNum(id) {
    //   const example = this.markerList.find(item => item.id === id)
    //   console.log({ ...example }, 'example')
    //   return example && example.casenum
    // },
    goPage(url, links) {
      url = links
        ? url + '?url=' + links
        : url

      uni.navigateTo({
        url
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.cell-list {
  position: relative;
  padding: 110rpx 36rpx 36rpx;
  background-color: rgb(251, 251, 251);
  height: 100vh;
  overflow: auto;
  box-sizing: border-box;
  .city-list {
    width: calc(100% - 63rpx - 24rpx);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 24rpx auto 48rpx;
    overflow: auto;
    .city {
      min-width: 127.8rpx;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      background-color: #fff;
      border-radius: 19.8rpx;
      font-size: 31.788rpx;
    }
  }

  .example-list {
    margin-top: 36rpx;
    .example {
      position: relative;
      background-color: #fff;
      border-radius: 29rpx;
      padding-top: 54rpx;
      box-sizing: border-box;
      margin-bottom: 36rpx;
      padding-bottom: 30rpx;
      display: flex;
      .wrap {
        width: 432rpx;
        .title {
          padding: 0 36rpx;
          font-size: 36rpx;
          line-height: 58rpx;
          color: rgba(20, 19, 18, 1);
          font-weight: bold;
        }
        .price {
          padding: 0 36rpx;
          font-size: 21.6rpx;
          color: rgba(89, 89, 89, 1);
          margin: 12rpx 0;
        }
        .bottom {
          padding-left: 36rpx;
          display: flex;
          margin-top: 36rpx;
          .category {
            text-align: center;
            width: 244rpx;
            height: 54rpx;
            line-height: 54rpx;
            font-size: 20rpx;
            padding: 12rpx, 21rpx, 12rpx, 21rpx;
            color: rgba(20, 19, 18, 1);
            background-color: rgba(245, 245, 245, 1);
            border-radius: 18rpx;
            margin-right: 36rpx;
            box-sizing: border-box;
          }
          .toggle {
            width: 137rpx;
            height: 54rpx;
            line-height: 54rpx;
            font-size: 21rpx;
            background-color: rgba(55, 68, 134, 1);
            border-radius: 13rpx;
            color: #fff;
            text-align: center;
          }
        }
      }
      .image {
        position: absolute;
        right: 58rpx;
        top: 55%;
        transform: translateY(-50%);
        width: 176rpx;
        height: 176rpx;
      }
    }
  }
}
.hover-btn {
  position: fixed;
  bottom: 100rpx;
  right: 40rpx;
  border-radius: 24rpx;
  width: 104.4rpx;
  height: 104.4rpx;
  background-color: rgba(55, 68, 134, 1);
  text-align: center;
  padding: 14rpx 4rpx 0;
  box-sizing: border-box;
  .icon {
    width: 45rpx;
    height: 45rpx;
  }
  .text {
    color: #fff;
    font-size: 18rpx;
  }
}
</style>
